<template>
  <logo-vue></logo-vue>
  <div class="list" v-if="post">
    <div class="post">
      <h1>{{ post.title }}</h1>
      <p>作者：{{ post.summary }}</p>
      <div class="post-content" v-html="post.content"></div>
    </div>

    <!-- 显示其他的文章信息 -->
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()
    const post = ref(null)

    onMounted(async () => {
      const id = route.params.id
      const response = await fetch(`http://localhost:3000/api/posts/${id}`)
      post.value = await response.json()
    })

    return {
      post
    }
  }
}
</script>

<style scoped>
@media screen and (min-width: 1036px) {
  .list {
    /* width: 1200px; */
  }
}
.list {
  padding: 1.8em;
  padding-top: 0 !important;
  background-color: white;
}
.list .post h1 {
  margin-top: 0;
}

.post {
  border-bottom: 2px solid #f0f0f0;
  margin-bottom: 2em;
}

.post h2 {
  margin-bottom: 0.5em;
}

/* 字体 */
@font-face {
  font-family: 'PangMenZhengDao';
  src: url('@/assets/Pang.ttf') format('truetype');
}
/* 字体旁门 */
.navtop {
  color: #ccc;
  font-family: 'PangMenZhengDao', Arial, sans-serif;
}
.post p {
  margin-bottom: 1em;
  font-size: 16px;
}
.post-content {
  text-indent: 2em;
  line-height: 1.6;
  margin-bottom: 1em;
  text-align: justify;
  color: rgba(60, 60, 67);
  font-size: 16px;
}
</style>
